<!--优先级策略-->
<template>
  <a-card >
    <NoAuthPage v-showNoAuth="'D8-1'" :imgBoxStyle="{height:'40vh',margin:0}"/>

    <div v-userAuth="'D8-1'">
      <div style="margin:0 0 1em 0 ">
      <a-tooltip placement='bottom' v-userAuth="'D8-2'">
        <template slot='title'>
          <span>{{$t('Create')}}</span>
        </template>
        <a-button type="primary" @click="createPolicy_dialog = true">
          <!-- icon='file-add' -->
          <!-- <i class="icon icon-new16f"></i> -->
          <Iconfont class="icon" type="icon-new16f"></Iconfont>
          {{$t('Create')}}
        </a-button>
      </a-tooltip>
      <a-tooltip placement='bottom' v-userAuth="'D8-3'">
        <template slot='title'>
            <span>{{$t('Edit')}}</span>
        </template>
        <a-button type='primary' style="margin-left:1em" @click="openEdit" :disabled="selectedRowKeys.length==1 && !isDisabledEdit?false:true">
          <!-- icon='form'  -->
          <!-- <i class="icon icon-edit16f"></i> -->

          <Iconfont class="icon" type="icon-edit16f"></Iconfont>
          {{$t('Edit')}}
        </a-button>
      </a-tooltip>
      <a-tooltip placement='bottom' v-userAuth="'D8-4'">
        <template slot='title'>
            <span>{{$t('Copy')}}</span>
        </template>
        <a-button type='primary' style="margin-left:1em" @click="handleCopy" :disabled="selectedRowKeys.length==1?false:true">
          <!-- icon='copy' -->
          <!-- <i class="icon icon-copy16f"></i> -->

          <Iconfont class="icon" type="icon-copy16f"></Iconfont>
          {{$t('Copy')}}
        </a-button>
      </a-tooltip>
      <a-tooltip placement='bottom' v-userAuth="'D8-5'">
        <template slot='title'>
          <span>{{$t('Delete')}}</span>
        </template>
        <a-button type='danger' style="margin-left:1em" @click="handleDelete" :disabled="selectedRowKeys.length==1?false:true">
          <!-- icon='close-circle' -->
          <!-- <i class="icon icon-error16f"></i> -->

          <Iconfont class="icon" type="icon-error16f"></Iconfont>
          {{$t('Delete')}}
        </a-button>
      </a-tooltip>
      </div>
    
    <a-table class='tabstyle' :loading="tableLoading" bordered
			 :rowSelection='{type:"radio",selectedRowKeys:selectedRowKeys,onChange:onSelectChange,onSelect:onSelect}' 
			 :dataSource="tableData" size="small" :pagination='pagination' rowKey="id" :locale="defaultSetting"
       :scroll="{ x: 'calc(1600px + 20%)'}">
             <!-- :columns="columns" -->
      <!--策略id fixed='left'-->
      <a-table-column key="id" :title="$t('Policy-ID')" data-index="id">
        <template slot-scope="text,record">
          <span>{{idFormat(text)}}</span>
        </template>
      </a-table-column>
      <a-table-column key="create_time" :title="$t('Create-time')" data-index="create_time"><!--创建时间-->
        <template slot-scope="text,record">
          <a-tooltip>
            <template slot="title">
              {{text.replace(/T/g," ")}}
            </template>
            <span>{{text.replace(/T/g," ")}}</span>
          </a-tooltip>
        </template>
      </a-table-column>
      <a-table-column key="identifier" :title="$t('Policy-identifier')" data-index="identifier" ><!--策略标识符-->
        <template slot-scope="text,record">
          <a-tooltip v-if="text.length >8">
            <template slot="title">
              <span>{{text}}</span>
            </template>
            <span class="overflowText">{{text}}</span>
          </a-tooltip>
          <span v-else>{{text}}</span>
        </template>
      </a-table-column>
      <a-table-column key="describe" :title="$t('Policy-description')" data-index="describe" ><!--策略描述-->
        <template slot-scope="text,record">
          <a-tooltip v-if="text.length >=12">
            <template slot="title">
              <span>{{text}}</span>
            </template>
            <span class="overflowText">{{text}}</span>
          </a-tooltip>
          <span v-else>{{text}}</span>
        </template>
      </a-table-column>
      <a-table-column-group>
        <span v-if="$store.state.language=='zh'" slot="title">基本限制（iops单位：次/秒，bps单位：M/s）</span>
        <span v-else slot="title">Basic limit (IOPs unit: times / second, BPS unit: m/s)</span>
        <a-table-column key="rbd_qos_iops_limit" :title="$t('Iops-total')" data-index="rbd_qos_iops_limit">
          <!-- <template slot-scope="text,record">
            <a-tooltip v-if="text.toString().length >9">
              <template slot="title"><span>{{text}}</span></template>
              <span class="overflowText2">{{text}}</span>
            </a-tooltip>
            <span v-else>{{text}}</span>
          </template> -->
        </a-table-column>
        <a-table-column key="rbd_qos_read_iops_limit" :title="$t('Iops-read')" data-index="rbd_qos_read_iops_limit" />
        <a-table-column key="rbd_qos_write_iops_limit" :title="$t('Iops-write')" data-index="rbd_qos_write_iops_limit" />
        <a-table-column key="rbd_qos_bps_limit" :title="$t('Bps-total')" data-index="rbd_qos_bps_limit" />
        <a-table-column key="rbd_qos_read_bps_limit" :title="$t('Bps-read')" data-index="rbd_qos_read_bps_limit" />
        <a-table-column key="rbd_qos_write_bps_limit" :title="$t('Bps-write')" data-index="rbd_qos_write_bps_limit" />
      </a-table-column-group>
      <a-table-column-group>
        <span v-if="$store.state.language=='zh'" slot="title">突发限制（iops单位：次/秒，bps单位：M/s）</span><!--；规则有效期（s）-->
        <span v-else slot="title">Burst Limit (IOPs unit: times / second, BPS unit: m/s)</span><!--; Rule validity (s)-->
        <a-table-column key="rbd_qos_iops_burst" :title="$t('Iops-total')" data-index="rbd_qos_iops_burst" />
        <a-table-column key="rbd_qos_read_iops_burst" :title="$t('Iops-read')" data-index="rbd_qos_read_iops_burst" />
        <a-table-column key="rbd_qos_write_iops_burst" :title="$t('Iops-write')" data-index="rbd_qos_write_iops_burst" />
        <a-table-column key="rbd_qos_bps_burst" :title="$t('Bps-total')" data-index="rbd_qos_bps_burst" />
        <a-table-column key="rbd_qos_read_bps_burst" :title="$t('Bps-read')" data-index="rbd_qos_read_bps_burst" />
        <a-table-column key="rbd_qos_write_bps_burst" :title="$t('Bps-write')" data-index="rbd_qos_write_bps_burst" />
      </a-table-column-group>
      <a-table-column key="username" :title="$t('Created-by')" data-index="username" /><!--创建人-->
      <a-table-column key="sharing_strategy" :title="$t('Share-policy')" data-index="sharing_strategy" ><!--共享策略-->
        <template slot-scope="text,record">
          <a-tooltip v-if="text == 0">
            <template slot="title">{{$t('Person-use')}}</template>
            <span>{{$t('Person-use')}}</span><!--个人专用-->
          </a-tooltip>
          <a-tooltip v-else-if="text == 1">
            <template slot="title">{{$t('Only-ref-no-edit')}}</template>
            <span>{{$t('Only-ref-no-edit')}}</span><!--只可引用，不可编辑-->
          </a-tooltip>
          <a-tooltip v-else-if="text == 2">
            <template slot="title">{{$t('Ref-edit')}}</template>
            <span>{{$t('Ref-edit')}}</span><!--可引用，可编辑-->
          </a-tooltip>
        </template>
      </a-table-column>
    </a-table>
    </div>

    <CreatePolicy :visible="createPolicy_dialog" @closeDialog="closeDialog" @updateList="getPriorityPolicy"/>
    <EditPolicy v-if="editPolicy_dialog" :visible="editPolicy_dialog" @closeDialog="closeDialog" :targetRow="targetRow" @updateList="getPriorityPolicy"/>
  </a-card>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import CreatePolicy from '@/components/storage_mgr/block/priorityPolicy/oper/CreatePolicy'
import EditPolicy from '@/components/storage_mgr/block/priorityPolicy/oper/EditPolicy'
import { idFormat } from '@/untils/formatMethods'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
  name: "Policy",
  components: { EmptyData, CreatePolicy, EditPolicy, NoAuthPage },
  data() {
    return {
    //   columns:[],
      tableLoading: false,
      pagination:{
	      defaultPageSize:5,
	      showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
	      showSizeChanger:true,
	      pageSizeOptions: ['5', '10', '15', '20'],
		    onChange: (page, pageSize) =>  {this.selectedRowKeys = []; },
	      onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
		    buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
	    },
      tableData: [],
      selectedRowKeys:[],
      defaultSetting: {emptyText:<EmptyData />},
      createPolicy_dialog: false,
      editPolicy_dialog: false,
      targetRow: {},
      // user_id: localStorage.getItem('user_id'),
      isDisabledEdit: false
    }
  },
  mounted() {
    this.getPriorityPolicy();
  },
  methods: {
    //优先级策略列表
    getPriorityPolicy() {
      this.tableLoading = true;
      request('get', 'block/strategy/',{
        // params: {
          // user_id: this.user_id
        // }
      }).then(res => {
        // console.log('优先级列表', res)
        if(res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
        }else {
          this.tableData = res.data;
        }
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        this.tableLoading = false;
      })
    },

    //选中项发生变化时的回调
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('aaaaaaaa',selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys;
      this.targetRow = selectedRows[0];
      if(selectedRows[0].sharing_strategy == 1) {
        this.isDisabledEdit = true;
      }else {
        this.isDisabledEdit = false;
      }
    },
    //用户手动选择/取消选择某列的回调
    onSelect(record, selected, selectedRows, nativeEvent) {

    },

    //打开编辑
    openEdit() {
      this.editPolicy_dialog = true;
    },

    //复制策略
    handleCopy() {
      request('post', 'block/strategy/copy',{
        id: this.targetRow.id,
        // user_id: this.user_id,
      }).then(res => {
        // console.log('复制策略', res);
        this.getPriorityPolicy();
        this.model(res.data.id) //返回模板
        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
      }).catch(err => {
        console.log(err);
      })
    },

    //删除策略
    handleDelete() {
      let _this = this;
      this.$confirm({
        title: this.$t('Del-volume-policy'),
        content: this.$store.state.language=='zh'?`删除卷优先级策略“${this.idFormat(this.targetRow.id)}”后，该策略将无法恢复！您确定要删除吗？`
        :`After deleting the volume priority policy "${this.idFormat(this.targetRow.id)}", the policy cannot be restored! Are you sure you want to delete?`,
        cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
        okType: 'danger',
        onOk() {
          request('DELETE', 'block/strategy/',{
            // data: {
              id: _this.targetRow.id,
              identifier: _this.targetRow.identifier, //规则标识符
              describe: _this.targetRow.describe //规则描述
            // }
          }).then(res => {
            // console.log('删除策略', res)
            _this.model(res.data.id) //返回模板
            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
            _this.getPriorityPolicy();
            _this.selectedRowKeys = [];
          }).catch(err => {
            console.log(err);
          })
        },
        onCancel() {},
      });
    },

    //关闭对话框
    closeDialog(type) {
      if(type == 'add') {
        this.createPolicy_dialog = false;
      }else {
        this.editPolicy_dialog = false;
      }
      this.selectedRowKeys = [];
    },

    //将id变成4位数 0001 0010 0100 1000
    idFormat(value) {
      return idFormat(value);
    }
  }
}
</script>

<style scoped>
  .overflowText,
  .overflowText2 {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .overflowText2 {
    max-width: 80px;
  }
  ::v-deep.ant-table-tbody > tr > td {
    /* max-width: 150px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th[key='create_time'] {
    width: 160px;
  }
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th[key='identifier'],
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th[key='describe'] {
    width: 150px;
  }
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th[key='username'] {
    width: 110px;
  }
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th[key='sharing_strategy'] {
    width: 150px;
  }
  /* 表头边框 */
  ::v-deep.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
    border: 1px solid #dbdada;
  }
  /* 表格项边框 */
  /* ::v-deep .ant-table-small > .ant-table-content .ant-table-row:last-child td {
    border: 1px solid #e6e6e6;
  } */
</style>